<script setup lang="ts">
// 子组件接受参数--
type Props = {
  index?: number;
  list?: { label: string }[];
};
let prop = withDefaults(defineProps<Props>(), {
  index: 0,
  list: () => [],
});
// 子组件接受参数==
const emits = defineEmits<{
  (e: "update:index", value: number): void;
}>();
</script>

<template>
  <div class="asides">
    <img class="user" src="@/assets/my/user.png" alt="用户头像" />
    <span class="nickName">用户名称</span>
    <div
      @click.stop="emits('update:index', k)"
      :class="index == k ? 'selectV' : ''"
      class="v"
      v-for="(v, k) of list"
      :key="k"
    >
      <img class="icon" :src="'./src/assets/my/' + k + '.png'" alt="小图标" />
      <span style="color: #333">{{ v.label }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.asides {
  width: 200px;
  height: 684px;
  padding-top: 24px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
  border: 1px solid #f2f6fc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 用户头像
.user {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  align-self: center;
}

.nickName {
  font-size: 20px;
  align-self: center;
  margin: 10px 0px 16px 0px;
  color: #333;
}

// 每一项导航栏
.v {
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 24px;
  gap: 0px 10px;

  &:hover {
    background-color: #eff9ff;
  }
}

// 每个小图标
.icon {
  width: 16px;
  height: 16px;
}

.selectV {
  background-color: #eff9ff !important;
}
</style>
